import { useState } from "react";
import "./app.scss";
import Son from "./Son";
const App = () => {
  const [backs] = useState([
    {
      h0: "rgb(184,45,68)",
      arr: [{ h0: "brown" }, { h0: "red" }, { h0: "orange" }],
    },
    {
      h0: "rgb(54,61,152)",
      arr: [{ h0: "blue" }, { h0: "purple" }, { h0: "cyan" }],
    },
    {
      h0: "rgb(255,213,205)",
      arr: [{ h0: "hotPink" }, { h0: "green" }, { h0: "gray" }],
    },
  ]);
  const mainDiv = document.getElementsByClassName("main");
  const mainH1 = document.getElementsByClassName("h1");
  //改变背景颜色
  const alertColor = ({ target }) => {
    const color = target.style.background;
    mainDiv[0].style.background = color;
  };
  const alertBack = ({ target }) => {
    target.click();
    mainDiv[0].style.background = target.value;
  };
  const color = ({ target }) => {
    target.click();
    mainH1[0].style.color = target.value;
  };
  return (
    <div className="box">
      <header>
        <div>
          <span>默认主题</span>

          {/* 里面至少一个ul和至少三个li */}
          <Son backs={backs} alertColor={alertColor}></Son>
          {/* li里有ul,ul里还有li */}

          <b>动态颜色</b>
          <label>
            <span>背景:</span>
            <input type="color" onChange={alertBack} />
          </label>
          <label>
            <span>Color:</span>
            <input type="color" onChange={color} />
          </label>
        </div>
      </header>
      <main>
        {/* style={{background:{}}} */}
        <div className="main">
          {/* style={{color:}} */}
          <h1 className="h1">This is main title</h1>
        </div>
      </main>
    </div>
  );
};

export default App;
